<template>
  <div class="container_box">
    <Header></Header>
    <!-- 内容主体 -->
    <div class="center_main">
      <!-- 轮播图 -->
      <div class="swiper-box">
        <Swiper :swiperData="swiperData"></Swiper>
        <div class="region">
          <div class="seach_bar warpper_box">
            <!-- 搜索模块 -->
            <div class="seachar">
              <div class="select">
                <el-select v-model="key" placeholder="请选择">
                  <el-option
                    v-for="item in lineSelect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <input type="text" placeholder="请输入关键词" v-model="keyword" />
              <div class="btn" @click="handleSelect" style="cursor: pointer">搜索</div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail_info warpper_box">
        <!-- 卡片推荐 -->
        <div class="card_referral">
          <div class="item">
            <!-- <img src="http://www.fuluyou.com/upfiles/2020/12/19/103732836138105924.png" /> -->
            <img src="../static/home/zgg.jpg" />
          </div>
          <div class="item">
            <img src="http://www.fuluyou.com//upfiles/2020/12/19/103732382136929582.png" />
          </div>
        </div>
        <!-- 最新推荐 -->
        <div class="special">
          <h4>景点最新推荐</h4>
          <el-card shadow="hover">
            <div class="top_title">
              <div class="left">
                <ul>
                  <li
                    :class="disIndex == item.code ? 'active' : ''"
                    v-for="(item) in discounts"
                    :key="item.code"
                    @mouseover="handleDiscounts(item.code)"
                  >{{ item.city }}</li>
                </ul>
              </div>
              <div class="right">查看旅游推荐</div>
            </div>
            <div class="details">
              <ul>
                <li v-for="item in discountsList" :key="item.id" @click="toDetails(item.id)">
                  <div class="urlImg">
                    <img :src="item.image" alt />
                  </div>
                  <div class="title">{{ item.title }}</div>
                  <div class="tip">
                    <p>{{ item.price }}元</p>
                    <span style="color:#000">
                      优惠：
                      <i style="color:red">{{ item.num || 5.2 }}折</i>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
        <!-- 更多推荐 -->
        <div class="more_nominate">
          <div class="item dx_zc">
            <a href="#">
              <p>旅行租车</p>
              <span>价格优惠 车况好</span>
            </a>
          </div>
          <div class="item dx_dy">
            <a href="#">
              <p>专属导游</p>
              <span>正规资质 专属服务</span>
            </a>
          </div>
          <div class="item dx_mp">
            <a href="#">
              <p>门票/票劵</p>
              <span>游园 游船 观光车</span>
            </a>
          </div>
        </div>
        <!-- 景点门票 -->
        <div class="scenic">
          <div class="left-box">
            <div class="title">
              <div class="left">
                <h3>热门旅游景点</h3>
              </div>
              <div class="right">
                <span
                  v-for="(item, index) in 3"
                  :key="index"
                  class="changeHand"
                  :class="index == currentSwiperIndex ? 'active' : ''"
                  @click="currentSwiperIndex = index"
                ></span>
              </div>
            </div>
            <div class="mian" @mousemove="isCycle = false" @mouseout="isCycle = true">
              <mu-carousel
                hide-controls
                hide-indicators
                :active="currentSwiperIndex"
                :interval="4000"
                @change="triggerSwprer"
                :cycle="isCycle"
              >
                <mu-carousel-item v-for="(item,index) in getLineTravel" :key="index">
                  <ul class="swipe1">
                    <li v-for="(v) in item.child" :key="v.id" @click="toDetails(v.id)">
                      <div class="bigImage changeHand">
                        <img :src="v.image" alt />
                      </div>
                      <div class="subtitle changeHand">{{v.title}}</div>
                      <div class="price">
                        <div class="l changeHand">
                          ￥{{v.price}}
                          <span>起</span>
                        </div>
                        <div class="r">
                          <span>省</span>
                          ￥30
                        </div>
                      </div>
                    </li>
                  </ul>
                </mu-carousel-item>
              </mu-carousel>
            </div>
          </div>
          <div class="right-box">
            <div class="title">最近更新</div>
            <div class="main">
              <ul>
                <li
                  v-for="(item) in updateStrategy"
                  @click="strategyPage(item.id)"
                  :key="item.id"
                  class="changeHand"
                >
                  <i class="el-icon-arrow-right"></i>
                  {{item.title}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 旅行租车 -->
        <div class="weekPaly">
          <div class="item">
            <div class="title">
              <div class="l">旅行租车</div>
            </div>
            <div class="mian floor1">
              <ul>
                <li v-for="(item, index) in rentalCar" :key="index" @click="toDetails(item.id)">
                  <div class="img changeHand">
                    <a href="https://www.zuche.com/"><img :src="item.src" alt /></a>
                    <h5 class="tip singleLine changeHand">{{item.title}}</h5>
                  </div>
                  <div class="price_box">
                    <div class="price">
                      <span>价格:</span>
                      {{item.price}}
                    </div>
                    <div class="num">可租</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="item">
            <div class="title">
              <div class="l">旅行签证</div>
            </div>
            <div class="main floor2">
              <div class="tapBar">
                <div class="items changeHand">
                  <a href="https://www.visaforchina.org/">亚洲签证</a>
                </div>
                <div class="items changeHand">
                  <a href="https://www.visaforchina.org/">欧洲签证</a>
                </div>
                <div class="items changeHand">
                  <a href="https://www.visaforchina.org/">非洲签证</a>
                </div>
                <div class="items changeHand">
                  <a href="https://www.visaforchina.org/">北美洲签证</a>
                </div>
                <div class="items changeHand">
                  <a href="https://www.visaforchina.org/">南美洲签证</a>
                </div>
                <div class="items changeHand">
                  <a href="https://www.visaforchina.org/">大洋洲签证</a>
                </div>
              </div>
              <div class="visa">
                <div class="subtitle">热门签证国家</div>
                <ul>
                  <li>
                    <a>越南</a>
                  </li>
                  <li>
                    <a>泰国</a>
                  </li>
                  <li>
                    <a>新加坡</a>
                  </li>
                  <li>
                    <a>法国</a>
                  </li>
                  <li>
                    <a>瑞士</a>
                  </li>
                  <li>
                    <a>冰岛</a>
                  </li>
                  <li>
                    <a>英国</a>
                  </li>
                  <li>
                    <a>意大利</a>
                  </li>
                  <li>
                    <a>希腊</a>
                  </li>
                  <li>
                    <a>西班牙</a>
                  </li>
                  <li>
                    <a>乌克兰</a>
                  </li>
                  <li>
                    <a>美国</a>
                  </li>
                  <li>
                    <a>加拿大</a>
                  </li>
                  <li>
                    <a>古巴</a>
                  </li>
                  <li>
                    <a>智利</a>
                  </li>
                  <li>
                    <a>秘鲁</a>
                  </li>
                  <li>
                    <a>巴西</a>
                  </li>
                  <li>
                    <a>新西兰</a>
                  </li>
                  <li>
                    <a>澳大利亚</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">
              <div class="l">游记攻略</div>
              <div class="r changeHand">
                更多
                <i class="el-icon-d-arrow-right"></i>
              </div>
            </div>
            <div class="main floor3">
              <ul>
                <li
                  class="changeHand"
                  v-for="item in strategyList"
                  :key="item.id"
                  @click="strategyPage(item.id)"
                >
                  <i class="el-icon-arrow-right"></i>
                  {{item.title}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 主题推荐 -->
        <div class="theme">
          <div class="title">
            <h2>主题推荐</h2>
            <ul>
              <li
                :class="item.id==theme_id?'active':''"
                @click="handleTheme(item.id)"
                v-for="item in themeList"
                :key="item.id"
                class="changeHand"
              >{{item.name}}</li>
            </ul>
          </div>
          <div class="main">
            <div class="left_box changeHand">
              <img
                src="https://t1-q.mafengwo.net/s9/M00/6B/86/wKgBs1byYsOAREbHAAJa5lj0Ouk15.jpeg?imageMogr2%2Fthumbnail%2F%21308x482r%2Fgravity%2FCenter%2Fcrop%2F%21308x482%2Fquality%2F100"
                alt
              />
            </div>
            <ul>
              <li v-for="(item, index) in theme_list" :key="index" @click="toPayPage(item.id)">
                <div class="bigImage changeHand">
                  <img :src="item.image" alt />
                </div>
                <div class="box">
                  <div class="subTitle changeHand">{{item.title}}</div>
                  <div class="price_box">
                    <div class="peice">
                      ￥{{item.price}}
                      <span>起</span>
                    </div>
                    <div class="tip changeHand">旅栈推荐</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 机酒自由行 -->
        <div class="theme">
          <div class="title">
            <h2>机旅自由行</h2>
            <ul>
              <li
                :class="item.id==freedom_id?'active':''"
                @click="handlefreedom(item.id)"
                v-for="item in freedomList"
                :key="item.id"
                class="changeHand"
              >{{item.name}}</li>
            </ul>
          </div>
          <div class="main">
            <div class="left_box changeHand">
              <img
                src="https://t1-q.mafengwo.net/s9/M00/6D/E5/wKgBs1byZ6CAZWQzAAM1AisO_po37.jpeg?imageMogr2%2Fthumbnail%2F%21308x482r%2Fgravity%2FCenter%2Fcrop%2F%21308x482%2Fquality%2F100"
                alt
              />
            </div>
            <ul>
              <li v-for="(item) in freedom_list" :key="item.id" @click="toPayPage(item.id)">
                <div class="bigImage changeHand">
                  <img :src="item.image" alt />
                </div>
                <div class="box">
                  <div class="subTitle changeHand">{{item.title}}</div>
                  <div class="price_box">
                    <div class="peice">
                      ￥{{item.price}}
                      <span>起</span>
                    </div>
                    <div class="tip changeHand">旅栈推荐</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 出行必备 -->
        <div class="theme">
          <div class="title">
            <h2>出行必备</h2>
            <ul>
              <li
                @click="handletrip(item.id)"
                :class="letrip_id==item.id?'active':''"
                v-for="item in tripList"
                :key="item.id"
                class="changeHand"
              >{{item.name}}</li>
            </ul>
          </div>
          <div class="main">
            <div class="left_box changeHand">
              <img
                src="https://b1-q.mafengwo.net/s9/M00/5B/47/wKgBs1b0rY-AVAXlAAJIPzQw_oE31.jpeg?imageMogr2%2Fthumbnail%2F%21308x482r%2Fgravity%2FCenter%2Fcrop%2F%21308x482%2Fquality%2F100"
                alt
              />
            </div>
            <ul>
              <li v-for="(item) in trip_list" :key="item.id" @click="toPayPage(item.id)">
                <div class="bigImage changeHand">
                  <img :src="item.image" alt />
                </div>
                <div class="box">
                  <div class="subTitle changeHand">{{item.title}}</div>
                  <div class="price_box">
                    <div class="peice">
                      ￥{{item.price}}
                      <span>起</span>
                    </div>
                    <div class="tip changeHand">旅栈推荐</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 当地玩乐 -->
        <div class="theme">
          <div class="title">
            <h2>当地玩乐</h2>
            <ul>
              <li
                :class="play_id==item.id?'active':''"
                @click="handlePlay(item.id)"
                class="changeHand"
                v-for="item in playList"
                :key="item.id"
              >{{item.name}}</li>
            </ul>
          </div>
          <div class="main">
            <div class="left_box changeHand">
              <img
                src="https://t1-q.mafengwo.net/s9/M00/6A/5B/wKgBs1byYO6ANv-PAAKIiOfMajw06.jpeg?imageMogr2%2Fthumbnail%2F%21308x482r%2Fgravity%2FCenter%2Fcrop%2F%21308x482%2Fquality%2F100"
                alt
              />
            </div>
            <ul>
              <li v-for="(item) in play_list" :key="item.id" @click="toPayPage(item.id)">
                <div class="bigImage changeHand">
                  <img :src="item.image" alt />
                </div>
                <div class="box">
                  <div class="subTitle changeHand">{{item.title}}</div>
                  <div class="price_box">
                    <div class="peice">
                      ￥{{item.price}}
                      <span>起</span>
                    </div>
                    <div class="tip changeHand">旅栈推荐</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>

    <!-- loading -->
    <!-- <Loading></Loading> -->
    <!-- 生成验证码 -->
    <!-- <div class="showCode_mask">
      <div class="box">
        <Verifycode
          :contentWidth="150"
          :contentHeight="50"
          @retrunResult="getResult"
        />
      </div>
    </div>-->
  </div>
</template>

<script>
import { get, post } from "../plugins/api";

export default {
  data() {
    return {
      isCycle: true,
      active: 0,
      isShowBackTop: false, // 是否显示回到顶部的火箭
      validateCode: "", // 验证码
      // 轮播图数据图片
      swiperData: [
        { imgUrl: require("@/static/home/banner1.jpg") },
        { imgUrl: require("@/static/home/banner2.jpg") },
        { imgUrl: require("@/static/home/banner3.jpg") },
        { imgUrl: require("@/static/home/banner4.jpg") }
      ],
      // 租车
      rentalCar: [
        {
          src:
            "https://cars.zuchecdn.com/static/img/Placeholder@2x_b3173aa2694e08eeb1e49ce797331632.png",
          title: "2021大众帕萨特",
          price: "2100",
          link: "https://www.zuche.com/"
        },
        {
          src:
            "https://cars.zuchecdn.com/static/img/car1_8de81432bcc20e964d64b890163b4d99.png",
          title: "宝沃BX7四驱",
          price: "2012",
          link: "https://www.zuche.com/"
        },
        {
          src:
            "https://cars.zuchecdn.com/static/img/car2_b12336dde557a112594ca899c12f2019.png",
          title: "2021沃尔沃S90",
          price: "2030",
          link: "https://www.zuche.com/"
        },
        {
          src:
            "https://cars.zuchecdn.com/static/img/car3_f28e49321a300cd170f740808151c84e.png",
          title: "2021别克GL8",
          price: "3000",
          link: "https://www.zuche.com/"
        },
        {
          src:
            "https://cars.zuchecdn.com/static/img/car4_8fc935e03c8b163e19ee3eb01847688a.png",
          title: "奥迪A6",
          price: "2500",
          link: "https://www.zuche.com/"
        },
        {
          src:
            "https://cars.zuchecdn.com/static/img/internationalts_59f10e11c86a6b8e7b3f2e671f9d14c2.jpg",
          title: "宝马系列",
          price: "1500",
          link: "https://www.zuche.com/"
        }
      ],
      key: 0,
      keyword: "", // 关键字
      lineSelect: [
        { label: "景点", value: 0 },
        { label: "酒店", value: 1 },
        { label: "攻略", value: 2 }
      ],
      disIndex: 0,
      ScenicIndex: 0,
      weekPalyIndex: 0,
      // 最新推荐
      discounts: [],
      discountsList: [],
      getLineTravel: [],
      // 景点门票
      scenic: ["苏州", "常州", "南京", "无锡", "镇江"],
      // 周末游
      weekPaly: ["广西", "广东", "江西", "湖南", "湖北"],
      // 当季热卖酒店
      hotel: [
        "天津新桃园度假酒店",
        "上海埃丽度假酒店",
        "重庆热度度假酒店",
        "北京玛雅度假酒店"
      ],

      // 轮播图的索引
      currentSwiperIndex: 0,
      // 最近更新
      updateStrategy: [],
      strategyList: [],
      themeList: [],
      theme_list: [],
      theme_id: 4211,
      freedomList: [],
      freedom_list: [],
      freedom_id: 4221,
      tripList: [],
      trip_list: [],
      letrip_id: 4231,
      playList: [],
      play_list: [],
      play_id: 4241
    };
  },
  methods: {
    // 获取主题推荐数据
    handleTheme(id) {
      this.theme_id = id;
      get("/travel/theme_recommend", { sub_item: id }).then(res => {
        this.theme_list = res.data;
      });
    },
    // 获取机酒自由行
    handlefreedom(id) {
      this.freedom_id = id;
      get("/travel/theme_recommend", { sub_item: id }).then(res => {
        this.freedom_list = res.data;
      });
    },
    // 获取出行必备
    handletrip(id) {
      this.letrip_id = id;
      get("/travel/theme_recommend", { sub_item: id }).then(res => {
        this.trip_list = res.data;
      });
    },
    // 当地玩乐
    handlePlay(id) {
      this.play_id = id;
      get("/travel/theme_recommend", { sub_item: id }).then(res => {
        this.play_list = res.data;
      });
    },

    // 最近更新
    recentlyUpate() {
      post("/strategy/optimum_strategy", {
        address: 0,
        count: 10
      }).then(res => {
        // conosle.log(res);
        this.updateStrategy = res.data;
      });
    },
    // 游记攻略
    notesStrategy() {
      post("/strategy/news_strategy", { address: 1, count: 10 }).then(res => {
        this.strategyList = res.data;
      });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    },
    // 跳转下单页
    tempPayPage(index) {
      // 索引 index
      // 跳转到详情页面
      this.$router.push("/sales");
    },
    //跳转到下单页
    toPayPage(id) {
      this.$router.push({
        path: "/sales",
        query: {
          id
        }
      });
    },
    // 跳转到攻略
    strategyPage(id) {
      this.$router.push({
        path: "/newsdetail",
        query: {
          id
        }
      });
    },
    // 最新推荐
    handleDiscounts(id) {
      this.disIndex = id;
      if (id != 0) {
        get("/travel/getTeavel_contxt", { code: id, address: 1 }).then(res => {
          if (res.code == 0) {
            this.discountsList = res.data;
          }
        });
      }
    },
    // 去最新推荐详情
    toDetails(id) {
      this.$router.push({
        path: "/sales",
        query: { id }
      });
      // let a = document.createElement("a");
      // a.href = link;
      // a.click();
    }, // 获取最新推荐的标题
    getTuiJianTitle() {
      get("/travel/getTravel_title", { address: 1 }).then(res => {
        if (res.code == 0) {
          // console.log(res);
          if (res.code == 0) {
            this.discounts = res.data;
          }
        }
      });
    },
    // 点击景点门票
    handleScenic(index) {
      this.ScenicIndex = index;
    },
    // 点击周末游
    handleweekPaly(index) {
      this.weekPalyIndex = index;
    },
    // 切换索引
    triggerSwprer(index) {
      this.currentSwiperIndex = index;
    },

    // 获取验证码结果
    // getResult(val) {
    //   if (val) {
    //     this.validateCode = val;
    //   }
    // },
    // 旅行路线
    lineTravel() {
      get("/travel/getTavel_line", { type: 4200 }).then(res => {
        if (res.code == 0) {
          let arr = [];
          for (let i = 0; i < 3; i++) {
            arr.push({ child: res.data.splice(0, 8) });
          }
          this.getLineTravel = arr;
        }
      });
    },
    // 获取所有的分类标题
    getTitleCategray() {
      let theme = 4210,
        freedom = 4220,
        trip = 4230,
        play = 4240;
      // 主题推荐
      get("/travel/them_list", { parent_id: theme }).then(res => {
        this.themeList = res.data;
      });
      // 机酒自由行
      get("/travel/them_list", { parent_id: freedom }).then(res => {
        this.freedomList = res.data;
      });
      // 出行必备
      get("/travel/them_list", { parent_id: trip }).then(res => {
        this.tripList = res.data;
      });
      // 当地玩乐
      get("/travel/them_list", { parent_id: play }).then(res => {
        this.playList = res.data;
      });
    },
    // 点击搜索
    handleSelect() {
      if (!this.keyword) {
        this.$message({
          message: "请输入关键字",
          type: "warning"
        });
      }
      this.$router.push({
        path: "/details_list",
        query: {
          key: this.key,
          keyword: this.keyword
        }
      });
    }
  },
  mounted() {
    // 获取最新推荐的标题
    this.getTuiJianTitle();
    // 获取列表
    this.handleDiscounts();
    this.lineTravel();
    this.recentlyUpate();
    this.notesStrategy();
    this.getTitleCategray();
    this.handleTheme(this.theme_id);
    this.handlefreedom(this.freedom_id);
    this.handletrip(this.letrip_id);
    this.handlePlay(this.play_id);
  },
  components: {}
};
</script>
<style lang="scss" scoped>
/deep/ .el-card__body:hover {
  border-top: 3px solid #37bcfb;
}
.center_main {
  // margin-top: 1px;
  .region {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100%;
    height: 500px;
    margin: 0 auto;
  }
}
.swiper-box {
  position: relative;
  // background-color: pink;
  height: 500px;

  .seach_bar {
    height: 500px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    .seachar {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 40px;
      background-color: #fff;
      border: 3px solid #37bcfb;
      display: flex;
      align-items: center;
      justify-content: center;

      .select {
        width: 88px;
        height: 100%;
        /deep/ .el-select {
          height: 100%;
        }
        /deep/.el-input.el-input--suffix {
          height: 100%;
        }
        /deep/ .el-input__inner {
          height: 100%;
          border: none;
        }
      }
      input {
        padding-left: 10px;
        flex: 1;
        height: 100%;
        border: none;
      }
      .btn {
        width: 70px;
        height: 100%;
        line-height: 35px;
        text-align: center;
        background-color: #37bcfb;
        color: #fff;
      }
    }
  }
}
.card_referral {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail_info {
  .card_referral {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    .item {
      flex: 1;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
  // 优惠特价
  .special,
  .weekPaly {
    width: 100%;
    margin: 20px 0;
    h4 {
      height: 40px;
      margin: 10px 0;
      font-size: 20px;
    }
    .top_title {
      width: 100%;
      align-items: center;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      .left {
        height: 100%;
        ul {
          height: 100%;
          display: flex;
          align-items: center;
          li {
            text-align: center;
            font-size: 14px;
            margin-right: 20px;
            height: 40px;
            cursor: pointer;
            &.active {
              border-bottom: 3px solid #37bcfb;
              color: #37bcfb;
            }
          }
        }
      }
      .right {
        border: 2px solid #37bcfb;
        color: #37bcfb;
        padding: 2px 10px;
        font-size: 12px;
        border-radius: 30px;
      }
      .more {
        cursor: pointer;
      }
    }
    .details {
      margin-top: 20px;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          width: 23%;
          padding: 2px 6px 10px;
          border: 1px solid #ddd;
          margin-right: 8px;
          cursor: pointer;
          height: 240px;
          .urlImg {
            margin: 0 auto;
            height: 150px;
            position: relative;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .title {
            font-size: 14px;
            height: 25px;
            overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
            display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            margin-top: 10px;
          }
          .tip {
            color: #dc5b4f;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            p {
              font-size: 16px;
              span {
                font-size: 12px;
                text-decoration: line-through;
                color: #ccc;
              }
            }
            & > span {
              font-size: 14px;
              color: #dc5b4f;
            }
          }
          &:hover {
            box-shadow: 0 10px 5px -10px rgba(0, 0, 0, 0.1),
              5px 5px 5px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.1);
            // box-shadow: 0 10px 5px -10px rgb(0 0 0 / 10%);
            // ,
            // 5px 5px 5px rgb(0 0 0 / 10%), 0 5px 5px rgb(0 0 0 / 10%);
          }
        }
      }
    }
  }
  // 更多推荐
  .more_nominate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-align:center;
    margin-left: 50px;
    
    width: 100%;
    .item {
      padding-left: 20px;
      padding-top: 15px;
      flex: 1;
      height: 70px;
      p {
        font-size: 18px;
        font-weight: 900;
      }
      span {
        font-size: 14px;
        color: #666;
      }
    }
    .dx_zc {
      color: #56a8d5;
      background-color: #dcf4fe;
      background: url("../static/home/dx_zc.jpg") no-repeat;
    }
    .dx_dy {
      background-color: #dcfff9;
      color: #3f8a7f;
      background: url("../static/home/dx_dy.jpg") no-repeat;
    }
    .dx_mp {
      color: #3f8a7f;
      background-color: #3f8a7f;
      background: url("../static/home/dx_mp.jpg") no-repeat;
    }
  }
  // 景点门票
  .scenic {
    display: flex;
    margin-top: 30px;
    border: 1px solid #ddd;
    padding: 6px 10px;
    .left-box {
      flex: 1;
      border-right: 1px dashed #ddd;
      /deep/ .mu-carousel {
        height: 500px;
      }
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;

        .left {
          border-bottom: 2px solid #049deb;
          h3 {
            font-size: 20px;
          }
        }
        .right {
          display: flex;
          span {
            background-color: #666;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 10px;
            &.active {
              background-color: #049deb;
            }
          }
        }
      }

      .swipe1,
      .swipe2,
      .swipe3 {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        flex: 1;
        li {
          width: 23.8%;
          margin-right: 10px;
          &::nth-child(4n) {
            margin-right: 0;
          }
          .bigImage {
            height: 160px;
            width: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .subtitle {
            height: 30px;
            margin: 10px 0;
          }
          .price {
            display: flex;
            justify-content: space-between;
            .l {
              font-size: 20px;
              color: #ff6d42;
              span {
                color: #ccc;
                font-size: 12px;
              }
            }
            .r {
              height: 21px;
              font-size: 12px;
              display: flex;
              align-items: center;
              border: 1px solid #049deb;
              color: #049deb;
              span {
                background-color: #049deb;
                color: #fff;
              }
            }
          }
        }
      }
    }
    .right-box {
      width: 300px;
      .title {
        padding: 6px 8px;
        border-bottom: 1px dashed #ddd;
      }
      .main {
        padding: 4px 8px;
        ul {
          display: flex;
          justify-content: center;
          flex-direction: column;
          li {
            display: flex;
            align-items: center;
            font-size: 12px;
            // height: 40px;
            margin: 10px 0;
            &:hover {
              color: #049deb;
            }
          }
        }
      }
    }
  }
  // 旅行租车
  .weekPaly {
    border: 1px solid #ddd;
    padding: 4px 6px;
    display: flex;

    .item {
      flex: 1;
      // width: 33.3%;
      padding: 0 6px;
      border-right: 1px dashed #ddd;
      &:nth-child(3) {
        border: none;
      }
      .l {
        font-size: 18px;
      }
      .title {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #37bcfb;
        height: 30px;
        align-items: center;
        .r {
          color: #ddd;
          font-size: 12px;
        }
      }
      .floor1.mian {
        width: 100%;
        margin-top: 10px;
        ul {
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          li {
            width: 31.7%;
            margin-right: 6px;
            margin-bottom: 12px;

            .img {
              width: 100%;
              position: relative;
              height: 80px;

              img {
                width: 100%;
                height: 100%;
              }
              h5 {
                font-weight: 400;
                width: 100%;
                font-size: 12px;
                color: #fff;
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.3);
              }
            }
            .price_box {
              margin-top: 10px;
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              .price {
                display: flex;
                color: #ff5703;
                font-size: 12px;
                span {
                  font-size: 12px;
                  color: #000;
                }
              }
              .num {
                font-size: 12px;
                color: #049deb;
              }
            }
          }
        }
      }
      .floor2.main {
        .tapBar {
          margin-top: 10px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          .items {
            width: 40%;
            padding: 8px 0;
            text-align: center;
            margin: 4px 8px;

            color: #fff;

            background-color: #049deb;
            a {
              color: #fff;
            }
          }
        }
        .visa {
          .subtitle {
            color: #666;
            font-size: 12px;
            font-weight: 900;
          }
          & > ul {
            // margin-top: 6px;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            li {
              width: 20%;
              font-size: 12px;
              margin-top: 6px;
              a {
                color: #333;
              }
              &:hover a {
                color: #049deb;
              }
            }
          }
        }
      }
      .floor3.main {
        ul {
          display: flex;
          justify-content: center;
          flex-direction: column;
          li {
            font-size: 12px;
            // height: 25px;
            margin: 5px 0;
            &:hover {
              color: #049deb;
            }
            i {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  // 主题推荐
  .theme {
    margin-top: 20px;
    .title {
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      height: 40px;
      h2 {
        font-size: 20px;
        color: #45bd9e;
        width: 150px;
      }
      ul {
        display: flex;
        align-items: center;
        li {
          padding: 8px 6px;
          margin-right: 30px;
          &.active {
            color: #fff;
            background: #39befb;
            padding: 2px 6px;
            border-radius: 6px;
          }
        }
      }
    }
    .main {
      margin-top: 10px;
      display: flex;
      .left_box {
        width: 170px;
        img {
          width: 100%;
        }
      }
      ul {
        margin-left: 10px;
        display: flex;
        width: 100%;
        li {
          position: relative;
          flex: 1;
          margin-right: 10px;
          &:last-child {
            margin: 0;
          }
          .bigImage {
            width: 253px;
            height: 151px;
            margin: 0 auto;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .box {
            position: absolute;
            z-index: 0;
            width: 100%;

            .subTitle {
              height: 40px;
              overflow: hidden;
              transition: all 0.1s;
              font-size: 12px;
            }
            .price_box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              .peice {
                font-size: 20px;
                color: #ff8a00;
                font-weight: 700;
                span {
                  font-size: 14px;
                  font-weight: 400;
                }
              }
              .tip {
                font-size: 12px;
                color: #ccc;
              }
            }
          }
        }
      }
    }
  }
}

// 显示遮罩层
// .showCode_mask {
//   position: fixed;
//   left: 0;
//   top: 0;
//   bottom: 0;
//   right: 0;
//   background-color: rgba(0, 0, 0, 0.3);
//   overflow: hidden;
//   .box {
//     position: absolute;
//     left: 50%;
//     top: 50%;
//     transform: translate(-50%, -50%);
//     width: 150px;
//     height: 70px;
//   }
// }
</style>
